<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>fullpage</title>
		<link href="//cdn.bootcss.com/fullPage.js/2.8.9/jquery.fullPage.css" rel="stylesheet">
		<link rel="stylesheet" href="myfullpage.css" />
	</head>
	<body>
		<div id="main">
			<div class="section section1">
				<h1>它，终于来了。</h1>
				<p>
					为了充分发挥体积小巧以及佩戴于手腕的优势，Apple Watch带来全新的科技和互动方式。它可以让你更快速便捷地完成早已习惯的事，
					也可以实现过去根本无法企及的新功能。因此，这将会是焕然一新的使用体验，也将实现与你前所未有的贴近。
				</p>
			</div>
			<div class="section section2">
				<h1>真正与你贴近的个人设备</h1>
			</div>
			<div class="section section3">
				<h1>非同一般的精准计时</h1>
				<p>
					高级手表向来计时精准为本，Apple Watch更是如此，它与你的iPhone配合使用，同全球标准时间的误差不超过50毫秒。而且你可以对
					表盘进行个性化设定，以更具个性和意义的方式显示时间，使其更贴合你的生活和日程需要。
				</p>
			</div>
			<div class="section section4">
				<h1>在三个特点鲜明的系列中找到你的风格</h1>
				<ul>
					<li>
						<img src="img/primary_large_2x.jpg" alt="" class="primary"/>
						<h3 class="primary"></h3>
						<p>
						不锈钢或深空黑色不锈钢表壳，蓝宝石水晶镜面，搭配多款时尚表带
						</p>
						<a href="javascript:;">了解更多</a>
					</li>
					<li>
						<img src="img/edition_large_2x.jpg"  class="sport"/>
						<h3  class="sport"></h3>
						<p>
						银色或深空灰色的阳极氧化铝金属表壳，强化Ion-X玻璃，搭配亮丽柔韧的表带
						</p>
						<a href="javascript:;">了解更多</a>
					</li>
					<li>
						<img src="img/sport_large_2x.jpg" alt="" class="edition" />
						<h3 class="edition"></h3>
						<p>
						18K黄金或玫瑰金表壳，蓝宝石水晶镜面，搭配精雕细琢的表带及表扣
						</p>
						<a href="javascript:;">了解更多</a>
					</li>
				</ul>
			</div>
			
		</div>
		
		
		<script src="../js/jquery-1.12.3.js"></script>
		<script src="//cdn.bootcss.com/fullPage.js/2.8.9/jquery.fullPage.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/move.js/0.5.0/move.min.js"></script>
	
		<script>
			$(document).ready(function(){
				$("#main").fullpage({
					verticalCentered:false,
					navigation:true,
					anchors:['page1','page2','page3','page4'],
					afterLoad:function(link,index){
						console.log(link);
						console.log(index);
						switch(index){
							case 1:
								move(".section1 h1").scale(1.5).end();
								move(".section1 p").set('margin-top',"50px").end();
							break;
							case 2:
								move(".section2 h1").scale(1.3).end();
							break;
							case 3:
								move(".section3 h1").set("margin-left","0px").end()
								move(".section3 p").set("margin-left","20%").end()
							break;
							case 4:
								move('.section4 img.primary').rotate(360).end(
									function(){
										move('.section4 img.sport').rotate(360).end(
											function(){
												move('.section4 img.edition').rotate(360).end(
													move('.section4 h3.primary').scale(1.3).end(
														function(){
															move('.section4 h3.sport').scale(1.3).end(
																function(){
																	move('.section4 h3.edition').scale(1.3).end();
																}
															)
																
														}
													)
												)
											}
										)
									}
								)
								break;
							default:
								break;
						}
					},
					onLeave:function(index){
						switch (index){
							case 1:
								move(".section1 h1").scale(1).end();
								move(".section1 p").set('margin-top',"800px").end();
							break;
							case 2:
								move(".section2 h1").scale(1).end();
							break;
							case 3:
								move(".section3 h1").set("margin-left","-100%").end()
								move(".section3 p").set("margin-left","150%").end()
							break;
							case 4:
								move('.section4 img.primary').rotate(-360).end(
									function(){
										move('.section4 img.sport').rotate(-360).end(
											function(){
												move('.section4 img.edition').rotate(-360).end(
													move('.section4 h3.primary').scale(1).end(
														function(){
															move('.section4 h3.sport').scale(1).end(
																function(){
																	move('.section4 h3.edition').scale(1).end();
																}
															)
																
														}
													)
												)
											}
										)
									}
								)
								break;
							default:
								break;
						}
					}
				})
			})
		</script>
	</body>
</html>
